import React, { Component } from 'react'
import './style.css'
export class Tab extends Component {
  constructor(props){
    super(props);
    this.state = {
        list:this.props.title,
        currentIndex:0
    }
  }

  handleCurrentIndex(currentIndex){
    this.setState({currentIndex})
    this.props.tabIndexFn(currentIndex);
  }

  render() {
    const {list,currentIndex} = this.state;
    return (
      <div className='tab'>
          {list.map((item,index) => {
            return (
                <div className='tab-item ' key={item} onClick={()=>this.handleCurrentIndex(index)}>
                    <span className={index == currentIndex ? 'active text' : ''}>{item}</span>
                </div>
            )
          })}
      </div>
    )
  }
}

export default Tab